<template>
	<view class="user">
		<view class="user-top flex-center-between" @click="pageTo('userInfo')">
			<view class="user-top-avatar">
				<image
					class="avatar"
					:src="userInfo.avatar"
					mode="aspectFill">
				</image>
			</view>
			<view class="user-top-info">
				<view class="user-top-info-name">
					{{isLogin ? userInfo.nickname : '未登录'}}
				</view>
				<!-- <text v-if="isLogin" class="user-top-info-code">
					推荐码：{{userInfo.referer ? userInfo.referer : '无'}}
				</text> -->
				<view v-if="!isLogin" class="goto-login" @click.stop="pageTo('/pages/login/login')">
					去登录
					<uni-icon type="arrowright" color="#fff"></uni-icon>
				</view>
			</view>
			<view v-if="isLogin">
				<uni-icon color="#fcfcfc" size="24" type="arrowright"></uni-icon>
			</view>
		</view>
		<uni-list>
			<uni-list-item
				title="我的订单"
				@click="pageTo('userOrder')"
				thumb="/static/images/user-orders.png">
			</uni-list-item>
			<!--  #ifdef  MP-WEIXIN -->
			<uni-list-item
				title="服务召唤"
				@click="pageToServiceCall"
				thumb="/static/images/user-application.png">
			</uni-list-item>
			<!--  #endif -->
			<!--  #ifndef  MP-WEIXIN -->
			<!--  #endif -->
			<uni-list-item
				title="企业认证"
				v-if="certifStatus !== 1"
				@click="pageTo('userCertification')"
				:show-badge="true"
				:badge-type="certifType"
				:badge-text="certifStatusText"
				thumb="/static/images/user-certification.png">
			</uni-list-item>
			<uni-list-item
				v-if="certifStatus === 1"
				title="企业资料"
				@click="pageTo('userCompanyInfo')"
				:show-badge="true"
				:badge-type="certifType"
				:badge-text="certifStatusText"
				thumb="/static/images/user-customerinfo.png">
			</uni-list-item>
			<uni-list-item
				title="租机信息"
				@click="pageTo('userDeviceInfo')"
				thumb="/static/images/user-devices.png">
			</uni-list-item>
			<uni-list-item
				title="租赁合同"
				@click="pageTo('userContract')"
				thumb="/static/images/user-contract.png">
			</uni-list-item>
			<uni-list-item
				title="发票列表"
				@click="pageTo('userInvoice')"
				thumb="/static/images/user-invoice.png">
			</uni-list-item>
			<!-- <uni-list-item
				title="渠道申请"
				@click="pageTo('userApplication')"
				thumb="/static/images/user-application.png">
			</uni-list-item> -->
			<uni-list-item
				title="优惠券"
				@click="pageTo('userCoupon')"
				thumb="/static/images/user-coupon.png">
			</uni-list-item>
			
			<uni-list-item
				title="关于APP"
				@click="pageTo('userAboutApp')"
				thumb="/static/images/user-aboutApp.png">
			</uni-list-item>
		</uni-list>
		
		<view class="submit-btn" v-if="isLogin">
			<button @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon.vue'
	import uniList from '@/components/uni-list.vue'
	import uniListItem from '@/components/uni-list-item.vue'
	export default {
		components: {
			uniIcon,
			uniList,
			uniListItem,
		},
		data() {
			return {
				userInfo: {},
				isLogin: false,
				certifStatus: -1,
				certifStatusText: '未认证',
				certifType: 'primary',
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			/**
			 * 获取用户信息
			 */
			getUserInfo () {
				let userInfo = uni.getStorageSync('USER_INFO')
				if (userInfo.token) {
					this.userInfo = userInfo
					this.isLogin = true
					this.getCertifStatus()
				}
			},
			
			/**
			 * 获取企业认证状态
			 */
			async getCertifStatus() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/my',
					data: {}
				})
				if (res.status === 1) {
					switch (res.data.status){
						case 0:
							this.certifStatus = 0
							this.certifStatusText = '审核中'
							this.certifType = 'primary'
							break;
						case 1:
							this.certifStatus = 1
							this.certifStatusText = '已认证'
							this.certifType = 'primary'
							break;
						case 2:
							this.certifStatus = 2
							this.certifStatusText = '被驳回'
							this.certifType = 'error'
							break;
						default:
							this.certifStatus = -1
							this.certifStatusText = '未认证'
							this.certifType = 'primary'
							break;
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 退出登录
			 */
			async logout() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/account/logout',
					data: {}
				})
				if (res.status === 1 || res.status === -1) {
					uni.removeStorageSync('USER_INFO')
					uni.reLaunch({url: '/pages/login/login'})
					uni.showToast({
						title: '成功退出登录',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page){
				if (this.isLogin) {
					uni.navigateTo({url: page})
				} else {
					const needLoginPages = [
						'userInfo', // 个人信息
						'userOrder', // 订单信息
						'userCompanyInfo', // 企业资料
						'userDeviceInfo', // 租机信息
						'userContract', // 租赁合同
						'userCertification', // 企业认证
						'userApplication', // 渠道申请
					]
					if (needLoginPages.find(item => item === page)) {
						uni.navigateTo({url: '/pages/login/login'})
						uni.showToast({
							title: '登录后可见',
							icon: 'none'
						})
					} else if(page === 'serviceCall'){
						uni.navigateTo('/pages/device/' + page)
					} else {
						uni.navigateTo({
							url: page
						})
					}
				}
			},
			pageToServiceCall() {
				if (this.isLogin) {
					uni.navigateTo({url: '/pages/device/serviceCall'})
				}else {
					uni.navigateTo({url: '/pages/login/login'})
					uni.showToast({
						title: '登录后可见',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.user {
		&-top{
			height: 240rpx;
			width: 750rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			background: url(../../static/images/user-top-bg.png) no-repeat;
			background-size: 100% 100%;
			&-avatar{
				height: 134rpx;
				width: 134rpx;
				border: 6rpx solid #fff;
				border-radius: 50%;
				background: $uni-bg-color-grey;
				position: relative;
				.avatar{
					height: 134rpx;
					width: 134rpx;
					border-radius: 50%;
					background: $uni-bg-color-grey2;
				}
				
			}
			&-info{
				flex-grow: 1;
				flex-shrink: 1;
				padding-left: 30rpx;
				&-name{
					color: $uni-text-color-inverse;
				}
				&-code{
					padding: 6rpx 20rpx;
					border-radius: 20rpx;
					color: $uni-text-color-inverse;
					font-size: $uni-font-size-sm1;
					background: rgba(0,0,0,0.2);
				}
				.goto-login{
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					border-radius: 30rpx;
					color: $uni-text-color-inverse;
					font-size: $uni-font-size-sm2;
					background: rgba(0,0,0,0.2);
				}
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
	}
</style>
